<template>
  <!-- <div id="nav">
    <router-link to="/">Home</router-link> |
    <router-link to="/about">About</router-link>
  </div> -->
  <!-- <router-view/> -->

  <div id="appBox">
    <div id="left">
      <ul>
        <li>
          <router-link to="/CompositionAPI"> 组合式API </router-link>
        </li>
        <li>
          <router-link to="/CustomDirectives"> 自定义指令 </router-link>
        </li>
        <li>
          <router-link to="/teleport"> teleport </router-link>
        </li>
      </ul>
    </div>
    <div id="content">
      <router-view />
    </div>
  </div>
</template>

<script>
export default {};
</script>



<style lang="less" scoped>
* {
  margin: 0;
  padding: 0;
}
#appBox {
  height: 100vh;
  // background-color: #f00;
  display: flex;
  #left {
    width: 300px;
    overflow: auto;
  }
  #content {
    // width: 80%;
    width: calc(100% - 300px);
    background-color: #f5f5f5;
  }
}
</style>
